import React, {PureComponent} from "react"
import "./index.less"
import {Switch} from "antd"
import "animate.css"
import FileItem from "../../../../library/components/info/item"
import ReceiverSelector from "../../../../receiver/components/receiver-selector"
import statusRender from "../../../status"
import {read} from "zr-react-toolbox";


export default class OrderInfo extends PureComponent {
  render() {

    const {
      data,
      countDown,
      toDownload,
      onChangePrint,
      needPrint,
      headerText,
      fileReadOnly,
      onFileCheck,
      onSelectReceiver
    } = this.props
    const items = data.items || []
    const {
      receiverName,
      receiverPhone,
      address
    } = data

    return (
      <div className={'order-info-panel'}>
        <h1>{headerText}</h1>
        <div className={'order-status'}>{statusRender[data.status]}</div>

        {countDown
          ? <div>
            请在<b className={'count-down'}>{countDown}</b>内完成
          </div>
          : <div className={'count-down'}>订单已过期</div>
        }

        <div className={'info-box'}>

          <div className={'file-box'}>
            {
              items.map((i, idx) => {
                  const file = {
                    accessible: i.accessible,
                    id: i['fileId'],
                    originalName:i.originalName
                  }
                  const data = {
                    sizeName: i.sizeName,
                    code: i.clothingCode,
                    price: i.price
                  }
                  return <FileItem
                    key={`$${idx}`}
                    toDownload={toDownload}
                    readOnly={fileReadOnly}
                    onFileCheck={onFileCheck}
                    file={file}
                    data={data}
                    price={i.price}
                    type={i['fileType']}/>
                }
              )
            }
          </div>

          <table>
            <tbody>
            <tr>
              <td>
                <label>订单编号</label>
                <span className={'td-order-no'}>{data.orderNo || ''}</span>
              </td>
            </tr>
            <tr>
              <td>
                <label>创建时间</label>
                <span>{data['createTime']}</span>
              </td>
            </tr>
            <tr>
              <td>
                <label>是否需要打印</label>
                {data.status === 'un_pay'
                  ? <Switch checked={needPrint} onChange={onChangePrint}/>
                  : (data['needPrint'] ? '是' : '否')}
              </td>
            </tr>

            {
              !needPrint ? undefined :
                <tr>
                  <td>
                    <ReceiverSelector onSelect={onSelectReceiver}/>
                  </td>
                </tr>
            }

            {!data.needPrint
              ? undefined
              :
              <tr>
                <td>
                  <label>收件人</label>
                  <div className={'receiver-info'}>
                    <b>{receiverName}</b>
                    <span>{receiverPhone}</span>
                    <span>{address}</span>
                  </div>
                </td>
              </tr>
            }

            <tr>
              <td>
                <div className={'order-fee'}>
                  <label>订单总金额</label>
                  <div>
                    <span>￥</span> {((read(data, 'feeDetail.total') || 0) / 100).toFixed(2)} <span>元</span>
                  </div>
                </div>
                {
                  (read(data, 'feeDetail.items') || []).map((fee, idx) => {
                      return <div className={'order-fee item'} key={idx}>
                        <label></label>
                        <div>
                          <span> <b>+</b> <span>{fee['feeName']}</span> :  ￥{((fee.value || 0) / 100).toFixed(2)}元</span>
                        </div>
                      </div>
                    }
                  )
                }
              </td>
            </tr>
            </tbody>
          </table>
        </div>

      </div>
    )
  }
}